<template>
    <a-card>
      <div id="container"></div> 
    </a-card>
</template>
  
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
const map = ref()
const initMap = () => {
  AMapLoader.load({
    key: '245cea04a69dbcd7c3fed10dee6ad623', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca:{
      version:'2.0.0'
    }
  }) .then((res) => {      
      AMap.value = res
      // 上来就显示的中心点  北京 116.397, 39.918
      var lnglat = new res.LngLat(118.866035, 32.13961)
      map.value = new res.Map('container', {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 16, //初始化地图级别
        center: lnglat, //初始化地图中心点位置
      })
      map.value.clearMap() // 清除地图覆盖物
      // 地图是否可拖拽和缩放
      map.value.setStatus({
        dragEnable: true, // 是否可拖拽
        zoomEnable: true, // 是否可缩放
      })

   

    })
    .catch((e) => {
      console.log('error', e)
    })
}
onMounted(() => {
  initMap()
})


</script>
  
<style scoped>
  #container {
    width: 100%;
    height: 800px;
  }
</style>
  